<div id="mainDiv">
    <section class="breadcrumb-blog-version-one">
        <div class="single-bredcurms" style="background-image:url('/reception/images/bercums/Hotels-Version-02.jpg');">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="bredcrums-content">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="welcome-area">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="single-welcome-area">
                        <div class="single-imag">
                            <img src="/reception/images/welcome/1.jpg" alt="" class="img-thumbnail img-responsive">
                        </div>
                        <div class="overlay-image">
                            <img src="/reception/images/welcome/2.jpg" alt="" class="img-thumbnail img-responsive">
                        </div>
                    </div>
                </div> <!-- welcome area left side end -->

                <div class="col-md-6">
                    <div class="single-welcome-area">
                        <div class="single-imag">
                            <img src="/reception/images/welcome/1.jpg" alt="" class="img-thumbnail img-responsive">
                        </div>
                        <div class="overlay-image">
                            <img src="/reception/images/welcome/2.jpg" alt="" class="img-thumbnail img-responsive">
                        </div>
                    </div>
                </div>  <!-- welcome area right side end -->
            </div>
        </div>
    </section> <!-- welcome area start end here -->

    <!--旅游-->
    <section class="tour-package-bg image-bg-padding-100">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="section-title-version-2-white text-center">
                        <h2>热门旅游路线</h2>
                    </div>
                </div>
                <!-- tour packages carosual -->
                <div class="popular-packages-carasoul owl-carousel">
                    <div class="single-package-carasoul">
                        <div class="package-location">
                            <img :src="routes[0].tourismImage[0].url" alt="">
                            <span>￥{{routes[0].price}}</span>
                            <div class="package-long-btn hvr-shutter-out-horizontal">
                                <a href="#" @click="routeJump(routes[0].id)">点击查看详情</a>
                            </div>
                        </div>

                        <div class="package-details">
                            <div class="package-places">
                                <h4>{{routes[0].title}}</h4>
                                <div class="details">
                                    <p><span>简介</span>: {{routes[0].introduction}}.</p>
                                </div>
                            </div>
                            <div class="package-ratings-review">
                                <ul class="two-column">
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="single-package-carasoul">
                        <div class="package-location">
                            <img src="/images/tourism_background.jpg" alt="">
                            <span>￥2000</span>
                            <div class="package-long-btn hvr-shutter-out-horizontal">
                                <a href="#" @click="routeJump(3)">点击查看详情</a>
                            </div>
                        </div>
                        <div class="package-details">
                            <div class="package-places">
                                <h4>成都-哈尔滨 3日游</h4>
                                <div class="details">
                                    <p><span>简介</span>: bbb.</p>
                                </div>
                            </div>
                            <div class="package-ratings-review">
                                <ul class="two-column">
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="single-package-carasoul">
                        <div class="package-location">
                            <img src="/upload/routeImages/1617852570947.jpg" alt="">
                            <span>￥5000</span>
                            <div class="package-long-btn hvr-shutter-out-horizontal">
                                <a href="#" @click="routeJump(9)">点击查看详情</a>
                            </div>
                        </div>

                        <div class="package-details">
                            <div class="package-places">
                                <h4>自贡-秦皇岛 10日游</h4>
                                <div class="details">
                                    <p><span>简介</span>: 自贡-秦皇岛 10日游 自贡-秦皇岛 10日游 自贡-秦皇岛 10日游 自贡-秦皇岛 10日游</p>
                                </div>
                            </div>
                            <div class="package-ratings-review">
                                <ul class="two-column">
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="single-package-carasoul">
                        <div class="package-location">
                            <img src="images/packages/4.jpg" alt="">
                            <span>$120</span>
                            <div class="package-long-btn hvr-shutter-out-horizontal">
                                <a href="#">Book Now</a>
                            </div>
                        </div>

                        <div class="package-details">
                            <div class="package-places">
                                <h4>Dubai – All Stunning Places</h4>
                                <div class="details">
                                    <p><span>Included</span>: Flight Facility, 5 Star Hotel, Sightseeing, Transfers, Meals.</p>
                                </div>
                            </div>
                            <div class="package-ratings-review">
                                <ul class="two-column">
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div> <!-- tour packages carosual end -->
            </div>
        </div>
    </section> <!-- Tour Packages end here -->

    <!--酒店-->
    <section class="section-paddings offer-package">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="section-title-version-2-black text-center">
                        <h2>热门酒店</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-sm-6 col-md-6 col-lg-6" v-for="hotel in hotels">
                    <div class="single-offer">
                        <div class="row">
                            <div class="col-12 col-xs-12 col-sm-6 col-md-6   package-pho-res">
                                <div class="single-offer-image">
                                    <img :src="hotel.hotelDetail.detailImages[0].image" alt="">
                                </div>
                            </div>
                            <div class="col-12 col-xs-12 col-sm-6 col-md-6 package-pho-res-text">
                                <div class="single-offers-elemetns">
                                    <div class="single-offer-details">
                                        <div class="offer-title">
                                            <h4>{{hotel.hotelName}}</h4>
                                            <ul class="two-column">
                                                <li v-for="i in hotel.hotelStar"
                                                    style="display: inline;color: #5cb85c;">
                                                    <i class="fa fa-star"></i></li>
                                            </ul>
                                        </div>
                                        <div class="offer-details">
                                            <div class="offer-btn">
                                                <a @click="jump(hotel.hotelMainId)"
                                                   class="travel-booking-btn-lg hvr-shutter-out-horizontal">
                                                    查看详情
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- end single  offer -->
            </div>
        </div>
    </section> <!-- Last minute offer end here -->

    <!--<section class="section-blog-bg blog-2">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <div class="section-title-version-2-white text-center">
                        <h2>Travel guide and Expert Advice</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Etiam at ipsum at ligula vestibulum </p>
                    </div>
                </div>
            </div>
            <div class="row">
                &lt;!&ndash; single travel blog&ndash;&gt;
                <div class="col-12 col-sm-6 col-md-6 col-lg-4 single-item">
                    <div class="single-travel-blog single-travel-blog-2">
                        <div class="blog-image">
                            <a href="#"><img src="/reception/images/blog/5.jpg" alt="">
                            </a>
                        </div>
                        <div class="blog-content">
                            <div class="blog-post-content">
                                <h4><a href="#" title="">Tips for taking a long-term trip with kids.</a></h4>
                                <div class="blog-meta">
                                    <ul class="post-social-2 d-flex justify-content-between">
                                        <li><a href="#"></i> 12July, 2019</a></li>
                                        <li>
                                            <a href="#"><i class="fa fa-user"></i> 10</a>
                                            <a href="#"><i class="fa fa-comments"></i> 43</a>
                                        </li>
                                    </ul>
                                </div>
                                <p>Lorem ipsum dolor sit amet consepctetur adipiscing elit Etiam at ipsum at ligula
                                    vestibulum sodales Sed luctus.</p>
                                <div class="read-more-btn">
                                    <a href="#">Read More <i class="fa fa-angle-right"> </i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> &lt;!&ndash; single travel guide & security end&ndash;&gt;

                <div class="col-12 col-sm-6 col-md-6 col-lg-4 single-item">
                    <div class="single-travel-blog single-travel-blog-2">
                        <div class="blog-image">
                            <a href="#"><img src="/reception/images/blog/6.jpg" alt="">
                            </a>
                        </div>
                        <div class="blog-content">
                            <div class="blog-post-content">
                                <h4><a href="#" title="">Tips for taking a long-term trip with kids.</a></h4>
                                <div class="blog-meta">
                                    <ul class="post-social-2 d-flex justify-content-between">
                                        <li><a href="#"></i> 12July, 2019</a></li>
                                        <li>
                                            <a href="#"><i class="fa fa-user"></i> 10</a>
                                            <a href="#"><i class="fa fa-comments"></i> 43</a>
                                        </li>
                                    </ul>
                                </div>
                                <p>Lorem ipsum dolor sit amet consepctetur adipiscing elit Etiam at ipsum at ligula
                                    vestibulum sodales Sed luctus.</p>
                                <div class="read-more-btn">
                                    <a href="#">Read More <i class="fa fa-angle-right"> </i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> &lt;!&ndash; single travel guide & security end&ndash;&gt;

                <div class="col-12 col-sm-6 col-md-6 col-lg-4 single-item">
                    <div class="single-travel-blog single-travel-blog-2">
                        <div class="blog-image">
                            <a href="#"><img src="/reception/images/blog/7.jpg" alt="">
                            </a>
                        </div>
                        <div class="blog-content">
                            <div class="blog-post-content">
                                <h4><a href="#" title="">Tips for taking a long-term trip with kids.</a></h4>
                                <div class="blog-meta">
                                    <ul class="post-social-2 d-flex justify-content-between">
                                        <li><a href="#"></i> 12July, 2019</a></li>
                                        <li>
                                            <a href="#"><i class="fa fa-user"></i> 10</a>
                                            <a href="#"><i class="fa fa-comments"></i> 43</a>
                                        </li>
                                    </ul>
                                </div>
                                <p>Lorem ipsum dolor sit amet consepctetur adipiscing elit Etiam at ipsum at ligula
                                    vestibulum sodales Sed luctus.</p>
                                <div class="read-more-btn">
                                    <a href="#">Read More <i class="fa fa-angle-right"> </i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> &lt;!&ndash; single travel guide & security end&ndash;&gt;
            </div>
        </div>
    </section> &lt;!&ndash; single popular destination  end&ndash;&gt;

    <section class="section-paddings">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="section-title-version-2-black text-center">
                        <h2>Gallery from Travelars</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Etiam at ipsum at ligula vestibulum </p>
                    </div>
                </div>
            </div>
            &lt;!&ndash; gallery iteam start here &ndash;&gt;
            <div class="row grid-3">
                <div class="col-sm-12 col-md-6 grid-item">
                    <figure>
                        <img src="/reception/images/gallery/1.jpg" alt="">
                        <figcaption>
                            <a href="/reception/images/gallery/1.jpg" title=""><i class="fa fa-eye"></i></a>
                            <h4>Place <span>Eiffel Tower</span></h4>
                            <h4>Caption By: <span>Michel Jusi</span></h4>
                        </figcaption>
                    </figure>
                </div> &lt;!&ndash; end single gallery &ndash;&gt;

                <div class="col-12 col-sm-6 col-md-4 col-lg-3 grid-item">
                    <figure>
                        <img src="/reception/images/gallery/2.jpg" alt="">
                        <figcaption>
                            <a href="/reception/images/gallery/2.jpg" title=""><i class="fa fa-eye"></i></a>
                            <h4>Place <span>Eiffel Tower</span></h4>
                            <h4>Caption By: <span>Michel Jusi</span></h4>
                        </figcaption>
                    </figure>
                </div> &lt;!&ndash; end single gallery &ndash;&gt;

                <div class="col-12 col-sm-6 col-md-4 col-lg-3 grid-item">
                    <figure>
                        <img src="/reception/images/gallery/3.jpg" alt="">
                        <figcaption>
                            <a href="/reception/images/gallery/3.jpg" title=""><i class="fa fa-eye"></i></a>
                            <h4>Place <span>Eiffel Tower</span></h4>
                            <h4>Caption By: <span>Michel Jusi</span></h4>
                        </figcaption>
                    </figure>
                </div> &lt;!&ndash; end single gallery &ndash;&gt;

                <div class="col-12 col-sm-6 col-md-4 col-lg-3 grid-item">
                    <figure>
                        <img src="/reception/images/gallery/6.jpg" alt="">
                        <figcaption>
                            <a href="/reception/images/gallery/6.jpg" title=""><i class="fa fa-eye"></i></a>
                            <h4>Place <span>Eiffel Tower</span></h4>
                            <h4>Caption By: <span>Michel Jusi</span></h4>
                        </figcaption>
                    </figure>
                </div> &lt;!&ndash; end single gallery &ndash;&gt;

                <div class="col-12 col-sm-6 col-md-4 col-lg-3 grid-item">
                    <figure>
                        <img src="/reception/images/gallery/4.jpg" alt="">
                        <figcaption>
                            <a href="/reception/images/gallery/4.jpg" title=""><i class="fa fa-eye"></i></a>
                            <h4>Place <span>Eiffel Tower</span></h4>
                            <h4>Caption By: <span>Michel Jusi</span></h4>
                        </figcaption>
                    </figure>
                </div> &lt;!&ndash;single gallery end &ndash;&gt;

                <div class=" col-12 col-sm-6 col-md-4 col-lg-3 grid-item">
                    <figure>
                        <img src="/reception/images/gallery/5.jpg" alt="">
                        <figcaption>
                            <a href="/reception/images/gallery/5.jpg" title=""><i class="fa fa-eye"></i></a>
                            <h4>Place <span>Eiffel Tower</span></h4>
                            <h4>Caption By: <span>Michel Jusi</span></h4>
                        </figcaption>
                    </figure>
                </div>
                &lt;!&ndash;single gallery end &ndash;&gt;
                &lt;!&ndash;single gallery &ndash;&gt;
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 grid-item">
                    <figure>
                        <img src="/reception/images/gallery/7.jpg" alt="">
                        <figcaption>
                            <a href="/reception/images/gallery/7.jpg" title=""><i class="fa fa-eye"></i></a>
                            <h4>Place <span>Eiffel Tower</span></h4>
                            <h4>Caption By: <span>Michel Jusi</span></h4>
                        </figcaption>
                    </figure>
                </div> &lt;!&ndash;single gallery end &ndash;&gt;

                <div class="col-12 col-sm-6 col-md-4 col-lg-3 grid-item">
                    <figure>
                        <img src="/reception/images/gallery/8.jpg" alt="">
                        <figcaption>
                            <a href="/reception/images/gallery/8.jpg" title=""><i class="fa fa-eye"></i></a>
                            <h4>Place <span>Eiffel Tower</span></h4>
                            <h4>Caption By: <span>Michel Jusi</span></h4>
                        </figcaption>
                    </figure>
                </div> &lt;!&ndash;single gallery end &ndash;&gt;
            </div> &lt;!&ndash; gallery item end here &ndash;&gt;
        </div>
    </section> &lt;!&ndash; gallery section end here &ndash;&gt;


    <section class="our_partners">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="section-title text-center">
                        <h2>Our Trusted Partners</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                &lt;!&ndash; partners images &ndash;&gt;
                <div class="partner-slider-active owl-carousel">
                    <div class="single-pertner">
                        <div class="partner-image">
                            <a href="#"><img src="/reception/images/partner/1.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="single-pertner">
                        <div class="partner-image">
                            <a href="#"><img src="/reception/images/partner/2.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="single-pertner">
                        <div class="partner-image">
                            <a href="#"><img src="/reception/images/partner/3.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="single-pertner">
                        <div class="partner-image">
                            <a href="#"><img src="/reception/images/partner/4.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="single-pertner">
                        <div class="partner-image">
                            <a href="#"><img src="/reception/images/partner/5.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            &lt;!&ndash; partners images &ndash;&gt;
            <div class="row">
                &lt;!&ndash; partners images &ndash;&gt;
                <div class="partner-slider-active owl-carousel">
                    <div class="single-pertner">
                        <div class="partner-image">
                            <a href="#"><img src="/reception/images/partner/1.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="single-pertner">
                        <div class="partner-image">
                            <a href="#"><img src="/reception/images/partner/2.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="single-pertner">
                        <div class="partner-image">
                            <a href="#"><img src="/reception/images/partner/3.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="single-pertner">
                        <div class="partner-image">
                            <a href="#"><img src="/reception/images/partner/4.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="single-pertner">
                        <div class="partner-image">
                            <a href="#"><img src="/reception/images/partner/5.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>  &lt;!&ndash; end partners images &ndash;&gt;
        </div>
    </section> &lt;!&ndash;end partner section &ndash;&gt;-->
</div>
<script>
    var mainVue = new Vue({
        el: "#mainDiv",
        data: {
            hotels: [],
            routes: [
                {
                    title:"",
                    introduction:"",
                    price: "",
                    tourismImage:[
                        {
                            url:""
                        }
                    ]
                }
            ],
        },
        methods: {
            initHotels: function () {
                var self = this;
                $.ajax({
                    url: "/api/hotels",
                    type: "get",
                    success: function (rs) {
                        console.log(rs);
                        self.hotels = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            initRoutes: function () {
                var self = this;
                $.ajax({
                    type: "GET",
                    url: "/api/routes",
                    dataType: "json",
                    success: function (rs) {
                        self.routes = rs;
                        console.log(self.routes)
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            jump: function (id) {
                sessionStorage.setItem("hotelId", id);
                window.location.href = "/hotel/detail"
            },
            routeJump: function(id){
                sessionStorage.setItem("routeId", id);
                window.location.href = "/tourism/routeDetail";
            }
        },
        created: function () {

        },
        mounted: function () {
            this.initHotels();
            this.initRoutes();
        }
    })
</script>

